<template>
  <div class="tabs-pane-item1">
    <el-table
      :data="baseReportList"
      :header-cell-style="iHeaderCellStyle"
      style="width: 100%"
      v-loading="loading">
      <el-table-column
        prop="reportDate"
        label="日期">
        <template v-slot="{row}">
          {{ row.reportDate.split(' ')[0] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="nodeName"
        label="节点">
      </el-table-column>
      <el-table-column
        prop="nodeValue"
        label="记录">
        <template v-slot="{row}">
          {{ handleNodeValue(row.nodeValue) }}
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryInfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {queryReviewReportByBase} from "@/api/dataReport/review-report";
import {thousandSeparator} from "@/util/util";

export default {
  name: "BaseMessageTable",
  props: {
    reportId: {
      type: Number | String,
      required: true
    }
  },
  created() {
    this.getBaseReportList()
  },
  data() {
    return {
      loading: false,
      baseReportList: [],
      total: 400,
      queryInfo: {
        size: 10,
        current: 1
      },
      currentPage: 1
    }
  },
  methods: {
    iHeaderCellStyle({}) {
      return {
        color: '#101010',
        backgroundColor: '#F2F2F2'
      }
    },
    handleSizeChange(val) {
      this.queryInfo.size = val
      this.getBaseReportList()
    },
    handleCurrentChange(val) {
      this.queryInfo.current = val
      this.getBaseReportList()
    },
    async getBaseReportList() {
      this.loading = true
      const {data: res} = await queryReviewReportByBase(Object.assign(this.queryInfo, {reportId: this.reportId})).catch(err => err)
      this.loading = false
      if (res.code !== 200) return this.$message.error('基本报告列表获取失败')
      this.baseReportList = res.data.records
      this.total = res.data.total
    },
    handleNodeValue(val) {
      var num = val - 0
      if (isNaN(num)) {
        return val
      } else {
        return thousandSeparator(num)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs-pane-item1 {
  display: flex;
  justify-content: space-between;
  flex-direction: column;

  .bottom-box {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
